<template>
  <div id="builder"></div>
</template>

<script lang="ts" setup>
import { FormBuilder } from "formiojs";
import "formiojs/dist/formio.full.min.css";
import ch from "@/translations/zhCN";
import { onMounted } from "vue";

onMounted(() => {

  new FormBuilder(document.getElementById("builder"), {}, {
    builder: {
      basic: {
        title: "基础组件",
        weight: 0,
        default: true
      },
      advanced: {
        title: "高级组件",
        weight: 10
      },
      layout: {
        title: "布局组件",
        weight: 20
      },
      data: {
        title: "数据组件",
        weight: 30
      },
      premium: {
        title: "其他",
        weight: 40
      },
      custom: {
        title: '预定义组件',
        weight: 10,
        components: {
          firstName: {
            title: 'First Name',
            key: 'firstName',
            icon: 'terminal',
            schema: {
              label: 'First Name',
              type: 'textfield',
              key: 'firstName',
              input: true
            }
          },
          lastName: {
            title: 'Last Name',
            key: 'lastName',
            icon: 'terminal',
            schema: {
              label: 'Last Name',
              type: 'textfield',
              key: 'lastName',
              input: true
            }
          },
          email: {
            title: 'Email',
            key: 'email',
            icon: 'at',
            schema: {
              label: 'Email',
              type: 'email',
              key: 'email',
              input: true
            }
          },
          phoneNumber: {
            title: 'Mobile Phone',
            key: 'mobilePhone',
            icon: 'phone-square',
            schema: {
              label: 'Mobile Phone',
              type: 'phoneNumber',
              key: 'mobilePhone',
              input: true
            }
          },
          feeItem: {
            title: '科目分摊',
            key: 'feeItem',
            icon: 'phone-square',
            schema: {
              label: '科目分摊',
              type: 'datagrid',
              key: 'feeItem',
              input: true,
              "components": [
                {
                  "label": "费用NC中心",
                  "widget": "choicesjs",
                  "tableView": true,
                  "dataSrc": "url",
                  "data": {
                    "url": "https://www.baidu.com",
                    "headers": [
                      {
                        "key": "",
                        "value": ""
                      }
                    ]
                  },
                  "dataType": "object",
                  "valueProperty": "value",
                  "validate": {
                    "select": false
                  },
                  "key": "select",
                  "type": "select",
                  "selectValues": "results.data",
                  "disableLimit": false,
                  "searchField": "name",
                  "filter": "name",
                  "noRefreshOnScroll": false,
                  "input": true
                },
                {
                  "label": "费用科目",
                  "widget": "choicesjs",
                  "tableView": true,
                  "key": "item",
                  "type": "select",
                  "input": true
                },
                {
                  "label": "分析名称",
                  "widget": "choicesjs",
                  "tableView": true,
                  "key": "fx",
                  "type": "select",
                  "input": true
                },
                {
                  "label": "辅助核算",
                  "widget": "choicesjs",
                  "tableView": true,
                  "key": "fzhs",
                  "type": "select",
                  "input": true
                },
                {
                  "label": "NC金额",
                  "widget": "choicesjs",
                  "tableView": true,
                  "key": "ncMoney",
                  "type": "select",
                  "input": true
                },
                {
                  "label": "支付金额",
                  "widget": "choicesjs",
                  "tableView": true,
                  "key": "paymoney",
                  "type": "select",
                  "input": true
                }
              ]
            },
          }
        }
      }
    }
  }).build().then((instance) => {
    console.log(instance);
    instance.language = "ch";
    const onBuild = function() {
      console.log(JSON.stringify(instance.schema, null, 4));
    };

    const onReady = function() {
      instance.on("change", onBuild);
      /*addComponent removeComponent updateComponent builderFormValidityChange*/
      instance.on("addComponent",(event: any) => {
        console.log("触发了 addComponent 事件",event)
      })
    };

    instance.ready.then(onReady);
  });

});

</script>
